<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>探索HTML的奥秘 - 我的学习笔记</title>
</head>
<body>
    <h2>3. 表格</h2>
<table border="1">
  <caption>学生信息表</caption> 
  <thead>
    <tr>
      <th>学号</th> <th>姓名</th> <th>专业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2021001</td> <td>小明</td> <td>计算机科学</td>
    </tr>
    <tr>
      <td>2021002</td> <td>小红</td> <td>软件工程</td>
    </tr>
    <tr>
      <td>2021003</td> <td>小刚</td> <td>信息安全</td>
    </tr>
    <tr>
      <td>2021004</td> <td>小丽</td> <td>信息工程</td>
    </tr>
  </tbody>
  <tfoot> 
    <tr>
      <td colspan="3">注：此为示例数据</td> 
    </tr>
  </tfoot>
</table>

<h2>4. 表单</h2>
<form action="/submit-handler" method="POST"> 
  <fieldset> 
    <legend>用户登录</legend> 

    <label for="username">用户名:</label> 
    <input type="text" id="username" name="username" required placeholder="请输入用户名"><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br><br>

    <label for="avatar">上传头像:</label>
    <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>

    <label for="country">国家:</label>
    <select id="country" name="country">
      <option value="">--请选择--</option>
      <option value="china">中国</option>
      <option value="usa">美国</option>
    </select><br><br>

    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br><br>

    <label>兴趣（可多选）:</label>
    <input type="checkbox" id="coding" name="hobbies" value="coding">
    <label for="coding">编程</label>
    <input type="checkbox" id="music" name="hobbies" value="music">
    <label for="music">音乐</label>
    <input type="checkbox" id="sports" name="hobbies" value="sports">
    <label for="sports">运动</label><br><br>

    <label for="message">个人简介:</label><br>
    <textarea id="message" name="message" rows="4" cols="40" placeholder="介绍一下你自己..."></textarea><br><br>

    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button" onclick="alert('Hello!')">普通按钮</button>
  </fieldset>
</form>

</body>
</html>